<!-- html代码 -->
<div>
    <!-- 按钮 -->
    <div class="btns">
        <button id="addArticle" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            新增
        </button>
        <!-- <button id="batchDetele" type="button" class="btn btn-danger">批量删除</button> -->
    </div>
    <!-- 表格 -->
    <table class="table">
        <thead>
            <tr>
                <th scope="col">编号</th>
                <th scope="col">文章标题</th>
                <th scope="col">文章封面</th>
                <th scope="col">发布时间</th>
                <th scope="col">所属栏目</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>
    <!-- 分页 -->
    <div id="myPage1" class="demo"></div>

    <!-- 新增模态框 -->
    <div class="modal fade" id="articleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">文章管理</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                          <label for="form_title">文章标题</label>
                          <input type="text" class="form-control" id="form_title" aria-describedby="emailHelp" name="tilte">
                        </div>
                        <div class="form-group">
                            <label for="form_source">文章封面</label>
                            <input type="hidden" id="imagepath" name="">  <!-- 保存的图片id 用于表单提交 -->
                            <span id="upload_duixiang">上传</span><!-- 上传按钮 -->
                            <div class="show"></div>
                        </div>
                        <div class="form-group">
                            <label for="form_parentId">所属栏目</label>
                            <input type="text" class="form-control" id="form_parentId" name="categoryId">
                        </div>
                        <div class="form-group">
                            <label for="form_content">文章内容</label>
                            <div id="editor"></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button id="saveArticle" type="button" class="btn btn-primary">保存</button>
                </div>
                
            </div>
        </div>
    </div>
</div>

<!-- css代码 -->
<style>
    .btns {
        margin: .8em 1em;
    }
    .modal-dialog {
        max-width: 800px;
    }
</style>

<!-- js代码 -->
<script>
    var id;
    var allData;
    var imgUrl;
    var url = "http://39.96.21.48:7788"
    // 将token设置到请求头中
    $.ajaxSetup({
        headers: {
            "Authorization":localStorage.getItem("token")
        }
    })


    // 商品图片上传
    a = $("#upload_duixiang").FraUpload({
        view        : ".show",      // 视图输出位置
        url         : "http://134.175.100.63:5588/file/upload", // 上传接口
        fetch       : "img",   // 视图现在只支持img
        debug       : false,    // 是否开启调试模式
        /* 外部获得的回调接口 */
        onLoad: function(e){                    // 选择文件的回调方法
            console.log("外部: 初始化完成...");
        },
        breforePort: function (e) {         // 发送前触发
            console.log("文件发送之前触发");
        },  
        successPort: function (e) {         // 发送成功触发
            console.log("文件发送成功");
            onload_image()
        },
        errorPort: function (e) {       // 发送失败触发
            console.log("文件发送失败");
            onload_image()
        },
        deletePost: function(e){    // 删除文件触发
            console.log("删除文件");
            console.log(e);
            alert('删除了'+e.filename)
            onload_image()
        },
        sort: function(e){      // 排序触发
            console.log("排序");
            onload_image()
        },
    });

    // 获取图片上传信息
    function onload_image(){
        var res = a.FraUpload.show()
        var ids = [];
        for(let k in res){
            this_val = res[k]
            if(!empty(res[k]['is_upload']) && !empty(res[k]['ajax'])){
                ajax_value = res[k]['ajax'];
                ids.push(ajax_value.data.id)
            }
        }
        $("#imagepath").val(ids);

        // 封装图片地址
        imgUrl = 'http://134.175.100.63:8686/group1/' + res[0].ajax.data.id
        console.log(res)
        console.log(imgUrl)
    }

    /**
     * 判断变量是否为空
     */
    function empty(value) {
        if(value=="" || value==undefined || value==null || value==false || value==[] || value=={}){
            return true;
        }else{
            return false;
        }
    }


    // 根据token换取用户信息
    $.get(url+"/user/info",{token:localStorage.getItem('token')},function(res){
        $("#host").text(res.data.realname)
    })

    // 批量删除
    // $("#batchDetele").on("click",function() {
    //     // 获取ids
    //     var ids = $(":checkbox:checked")
    //     // 将ids类数组对象->数组->遍历出id放到一个新数组中去
    //     var arr = [];
    //     Array.from(ids).forEach(function(item){
    //         arr.push(item.value)
    //     })

    //     // 调用接口
    // })

    // 删除
    $("tbody").on("click",".deleteArticle",function(){
        // 获取当前行id,closest最近的父元素tr
        id = $(this).closest('tr').find("input").val()
        $.get(url+"/article/deleteById?id="+id,function(res) {
            if(res.status == 200) {
                queryFindArticle(1)
                alert(res.message)
            }
        })
    })

    // 点击修改，把当前行信息放到模态框中
    $("tbody").on("click",".editArticle",function() {
        // 获取当前行id
        id = $(this).closest("tr").find("input").val();
        // var editData = allData.filter(function(item) {
        //     console.log(item)
        // })
        var editData = allData.forEach(function(item) {
            if(item.id == id) {
                // 弹出模态框
                $("#articleModal").modal("show")
                // 将当前行数据放到模态框中
                $("#form_title").val(item.title)
                $("#form_source").val(item.source)
                $("#form_parentId").val(item.categoryId)
                $(".w-e-text").html(item.content)
            }
        })
    })

    // 新增或保存文章信息
    $("#saveArticle").on("click",function() {
        // 获取模态框中的值 
        var title = $("#form_title").val();
        // var source = $("#form_source").val();
        var categoryId = $("#form_parentId").val();
        var content = $(".w-e-text").html();
        if(id) {
            var data = {
                id:id,
                title:title,
                source:imgUrl,
                categoryId:categoryId,
                content:content
            }
        } else {
            var data = {
                title:title,
                source:imgUrl,
                categoryId:categoryId,
                content:content
            }
        }  
        
        // 调用接口
        $.post(url+"/article/saveOrUpdate",data,function(res) {
            console.log(res)
            if(res.status == 200) {
                // 刷新数据
                queryFindArticle(1);
                // 关闭模态框
                $("#articleModal").modal("hide")
            }
        })
    })
    
    // 点击新增添加模态框
    $("#addArticle").on("click",function() {
        // 展示模态框
        $("#articleModal").modal("show")
    })

    // 创建模态框中编辑器
    var E = window.wangEditor;
    var editor = new E('#editor');
    editor.create();

    // 分页查询所有文章信息
    function queryFindArticle(page) {
        var data = {
            page:page,
            pageSize:5
        }
        $.get(url+"/article/pageQuery",data,function(res) {
            // 追加之前先清空tbody
            $("tbody").empty()
            allData = res.data.list
            res.data.list.forEach(function(item) {
                // 追加
                var articleData = $(`
                    <tr>
                        <td><input type="checkbox" value="`+item.id+`"></td>
                        <td>`+item.title+`</td>
                        <td>`+(item.source ? `<img style="height:60px;width:60px;" src="`+item.source+`" alt="">` : '暂无')+`</td>
                        <td>`+moment(item.publishTime).format('YYYY-MM-DD HH:mm:ss')+`</td>
                        <td>`+item.category.name+`</td>
                        <td>
                            <a href="#" class="deleteArticle" >删除</a>
                            <a href="#" class="editArticle">修改</a>
                            <a href="#" class="detailsArticle">详情</a>
                        </td>
                    </tr>
                `)
                articleData.appendTo($("tbody"))
            })
            // 分页插件
            $("#myPage1").sPage({
                page:res.data.page,
                pageSize:res.data.pageSize,
                total:res.data.total,
                prevPage:"<<",
                nextPage:">>",
                backFun:function(page){
                    queryFindArticle(page)
                }
            });
        })
    }
    queryFindArticle(1)
</script>


